<template>
	<section>
		<el-col :span="18">
			<template>
			  <div class="block" style="margin: 0 auto;">
			    <span class="demonstration">今日课程安排：</span>
			    <el-date-picker
			      v-model="Calendardate"
			      align="right"
			      type="date"
			      format="yyyy-MM-dd"
			      placeholder="选择日期">
			    </el-date-picker>
			  </div>
			  <el-carousel :interval="4000" type="card" height="200px" v-if="datelist.length>0">
			    <el-carousel-item v-for="item in datelist" :key="item" element-loading-text="拼命加载中" v-loading="dateloading">
			      <div class="coursedate">
			      	<el-row>
			      		<el-col :span="10">
			      			<p>课程名称:</p>
			      		</el-col>
			      		<el-col :span="14">
			      			<p style="text-align: left;">{{ item.name }}</p>
			      		</el-col>
			      	</el-row>	   
			      	<el-row>
			      		<el-col :span="10">
			      			<p>课程简介:</p>
			      		</el-col>
			      		<el-col :span="14">
			     		 	<div v-html="item.intro" class="intro"></div>
			      		</el-col>
			      	</el-row>
			      	<el-row>
			      		<el-col :span="10">
			      			<p>课程人数:</p>
			      		</el-col>
			      		<el-col :span="14">
			      			<p style="text-align: left;">{{ item.personCount }}</p>
			      		</el-col>
			      	</el-row>	
			      	<el-row>
			      		<el-col :span="10">
			      			<p>开课时间:</p>
			      		</el-col>
			      		<el-col :span="14">
			      			<p style="text-align: left;">{{ item.startTime }}</p>
			      		</el-col>
			      	</el-row>			      	
			      </div>
			    </el-carousel-item>
			  </el-carousel>
			</template>			
		</el-col>
		<el-col :span="24" class="toolbar"  style="padding-bottom: 0px;">
			
			<el-form :inline="true" >
				<el-form-item>
					<el-button type="primary" v-if="$store.state.role!='admin'&&$store.state.role!='manager'"  @click="skip('/scheduleadd')">新建课程</el-button>
				</el-form-item>		
				<el-form-item>
					<el-button type="warning" v-if="$store.state.role!='admin'&&$store.state.role!='manager'"  @click="copy('/schedulecopy',copyCourseId)">复制课程</el-button>
				</el-form-item>					
				<el-form-item>
					<el-input  v-model="key" placeholder="输入查询的关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary"  @click="getList">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>			
		<el-tabs v-model="type"  type="card">
		    <el-tab-pane label="正在授课" name='1'></el-tab-pane>
		    <el-tab-pane label="等待授课" name='0'></el-tab-pane>
		    <el-tab-pane label="已完成授课" name='2'></el-tab-pane>
		</el-tabs>	
		<!--工具条-->		
		<el-table :data="Lists" highlight-current-row v-loading="loading" style="width: 100%;">
		    <el-table-column
		      width="55">
				<template scope="scope">
				  <el-radio class="radio" v-model="copyCourseId" :label="scope.row.courseId"></el-radio>
				</template>		      
		    </el-table-column>			
			<el-table-column type="index" width='80'>
			</el-table-column>
			<el-table-column prop="name" label="课程名称" width="200">
			</el-table-column>
			<el-table-column prop="startTime" label="开始时间" width="200">
			</el-table-column>		
			<el-table-column prop="isFree" label="自由申请" width="200">
				<template scope="scope">
					<p>{{scope.row.isFree?'是':'否'}}</p>
				</template>
			</el-table-column>					
			<el-table-column label="课程简介" width="200">
		      <template scope="scope">
		        <el-popover trigger="hover" placement="top">
		          <div>课程简介: 	<div v-html="scope.row.intro "></div></div>
		          <div slot="reference" class="name-wrapper">
		            <el-tag>课程简介</el-tag>
		          </div>
		        </el-popover>
		      </template>
			</el-table-column>	
			<el-table-column prop="personCount" label="上课人数" width="200" >
			</el-table-column>		
			<el-table-column prop="teamCount" label="上课组数" width="200" >
			</el-table-column>			
			<el-table-column prop="realName" label="创建人"  width="200">
			</el-table-column>	
			<el-table-column prop="createTime" label="创建时间" width="200">
			</el-table-column>		
			<el-table-column v-show="$store.state.role=='admin'" prop="orgName" label="所属机构" width="200">
			</el-table-column>				
			<el-table-column prop="birth" min-width="200" label="操作" fixed="right">
				<template scope="scope">
					<el-button size="small"  type="primary" @click="skip('/courseinfo',scope.row.courseId,scope.row)">进入课程</el-button>					
					<el-button size="small" v-if="scope.row.type==1" type="danger" @click="endCourse(scope.row)">结束课程</el-button>
					<el-button size="small" type="danger"  v-if="scope.row.type==0" @click="handleDel(scope.row)">删除课程</el-button>
				</template>					
			</el-table-column>
		</el-table>
		<!--工具-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	
	</section>
</template>
<script>
	import { courselist,coursedelete,courseadd,courseone,courseedit,bussinesslist,courselistbuil,coursecalender,courseend} from '../../api/api';
	import ComFunJS from '../../common/js/util'

	//import NProgress from 'nprogress'
	export default {
		data() {
			return {
				addFormVisible: false,//打分界面是否显示
				loading: false,
				dateloading:false,
				Lists: [],
				total:"",
				copyCourseId:"",
				Calendardate:"",
				pageSize:'10',
				page:'1',
				key:'',
				date:"",
				type:"0",
				isSelf:'1',
				datelist:[],
			}
		},
		watch:{
			'type':function(){
				this.getList();
			},
			'Calendardate':function(){
				this.getCalender()
			}
		},		
		methods: {
			sortChange:function(val){
				console.log(val)
			},
		    getCalender:function(){
		    	this.dateloading=true;
				let params={date:ComFunJS.getNowDate('yyyy-MM-dd',this.Calendardate),pageNum:1,pageSize:100};
				coursecalender(params).then((res) => {
					this.datelist = res;
					this.dateloading=false
					//NProgress.done();
				});				    	
		    },
			//页面跳转
		    skip(link,id,row){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        		}
		        	}
		        )
		        sessionStorage.setItem("course",JSON.stringify(row))
		    },	
			//页面跳转
		    copy(link,id){
		    	if(!this.copyCourseId){
					this.$message({
						message: '请选择要复制的课程',
						type: 'error'
					});		    	
					return;
		    	}
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        		}
		        	}
		        )
		    },		    
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},			    
			//获取项目列表
			getList: function (type) {
				this.loading = true;
				//NProgress.start();
				let params={pageNum:this.page,pageSize:this.pageSize,key:this.key,type:this.type};
				courselist(params).then((res) => {
					this.total=res.total;					
					this.Lists = res.list;
					this.loading = false;
					//NProgress.done();
				});					
			},
			handleDel:function (row) {
				this.$confirm('确认删除该记录吗?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para =row.courseId;		
					coursedelete(para).then((res) => {
						if(!res.error){
							this.listLoading = false;
							//NProgress.done();
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.getList();							
						}
					});
				})
			},
			endCourse:function(row,type){
				this.$confirm('结束课程之后未提交与未批改作业的学生作业都将置位0分，课程结束之后，将不允许再提交作业和批改作业，是否确认要结束课程?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					var params=new URLSearchParams();
					params.append('courseId',row.courseId);
					courseend(params).then((r) => {
						if(!r.error){
							this.$message({
								message: '成功结束课程',
								type: 'success'
							});
							this.getList();									
						}else{
							this.$message({
								message: '失败',
								type: 'error'
							});						
						}
					})	
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消结束课程'		
					});						
				});				
			
			},			
		},	
		mounted() {
			this.getList();
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			if (month < 10) {
			    month = "0" + month;
			}
			if (day < 10) {
			    day = "0" + day;
			}
			var nowDate = year + "-" + month + "-" + day;
			this.Calendardate=nowDate;
			this.date=nowDate;
		}
	};

</script>
<style type="text/css">
	.el-carousel__item .coursedate {
    color: #fff;
    font-size: 14px;
    height: 200px;
    margin: 0;
    text-align: center;
  }
  .el-carousel__item .coursedate h1{
  	font-weight: bold;
  }
  .el-carousel__item .coursedate .intro{
	 overflow : hidden;
	text-overflow: ellipsis;
	max-height:50px;
	width: 100%;
	white-space: nowrap;
	text-align: left;
  }
  .el-carousel__item:nth-child(2n) {
    background-color:#495A80;
    
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color:#20a0ff;
  }
</style>